CSS transformallows you to translate, rotate, skew, scale, or add perspective effects to HTML elements.

This tutorial discusses everything you need to know to transform HTML elements like a pro.

Table of Contents

1. What is the CSS transformProperty?

2. What is the CSS rotate()Function?

3. What is the CSS rotateX()Function?

4. What is the CSS rotateY()Function?

5. What is the CSS rotateZ()Function?

6. What is the CSS rotate3d()Function?

7. CSS Rotate Functions vs. rotateProperty: What's the Difference?

8. What is the CSS scale()Function?

9. CSS scale()Function vs. scaleProperty: What's the Difference?

10. What is the CSS scaleZ()Function?

11. What is the CSS scale3d()Function?

12. What is the CSS skew()Function?

13. What is the CSS translate()Function?

14. What is the CSS translateZ()Function?

15. What is the CSS translate3d()Function?

16. CSS Translate Functions vs. translateProperty: What's the Difference?

17. What is the CSS perspective()Function?

18. CSS perspective()Function vs. perspectiveProperty: What's the Difference?

19. What is the CSS matrix()Function?

20. Why Does the CSS Transform Functions' Order Matter?

21. Tools for Converting Transform Functions to matrix()

22. Important Stuff to Know about Transforming Elements in CSS

23. Wrapping Up

So, without further ado, let's discuss the CSS transformproperty.

What Is the CSS transformProperty?

The CSS transformproperty specifies the transformational effect you wish to apply to an HTML element.

Here's the syntax:

html-element {   transform: value;}

The CSS transformproperty accepts the following values:

• inherit: Transforms the element with its parent element's transformvalue.

• initial: Transforms the HTML element with its default transformvalue.

• matrix(): Transforms the element two-dimensionally with a matrix of six values.

• matrix3d(): Transforms the HTML element three-dimensionally with a 4x4 matrix of sixteen values.

• none: Applies notransformation to the HTML element.

• perspective(): Transforms a 3D transformed element with a perspective view.

• rotate(): Transforms the element by rotating it two-dimensionally.

• rotate3d(): Transforms the element by rotating it three-dimensionally.

• rotateX(): Transforms the element by rotating it three-dimensionally along the X-axis.

• rotateY(): Transforms the element by rotating it three-dimensionally along the Y-axis.

• rotateZ(): Transforms the HTML element by rotating it three-dimensionally along the Z-axis.

• scale(): Transforms the element by scaling it two-dimensionally.

• scale3d(): Transforms the element by scaling it three-dimensionally.

• scaleX(): Transforms the element by scaling it along the X-axis.

• scaleY(): Transforms the element by scaling it along the Y-axis.

• scaleZ(): Transforms the HTML element by scaling it three-dimensionally along the Z-axis.

• skew(): Transforms the element by skewing it two-dimensionally along the X- and Y-axis.

• skewX(): Transforms the element by skewing it two-dimensionally along the X-axis.

• skewY(): Transforms the element by skewing it two-dimensionally along the Y-axis.

• translate(): Transforms the HTML element by translating (moving) it two-dimensionally.

• translate3d(): Transforms the element by translating it three-dimensionally.

• translateX(): Transforms the element by translating it along the X-axis.

• translateY(): Transforms the element by translating it along the Y-axis.

• translateZ(): Transforms the element by translating it three-dimensionally along the Z-axis.

Note:The transformproperty accepts one or more CSS transform functions. For instance, here's a valid transformdeclaration:

div {   transform: perspective(370px) scaleZ(5) rotate(17deg);}

In the snippet above, we assigned three transform functions to the transformproperty. Let's talk more about some of transform's values.

What is the CSS rotate()Function?

rotate()transforms an element by rotating it two-dimensionally around a fixed point.

Note:

• "Transform origin" is the fixed point around which an element rotates.

• You can define your element's fixed point using the CSS transform-originproperty. But the default is center.

Syntax of the CSS rotate()function

rotate()accepts a single argument. Here is the syntax:

element {   transform: rotate(angle);}

Note the following:

• The rotate(angle)function is equivalent to rotate3d(0, 0, 1, angle)or rotateZ(angle).

• The angleargument specifies the element's angle of rotation.

• anglecan be in degrees, gradians, radians, or turns.

• An angleargument consists of a number followed by the unit you wish to use—for instance, 45deg.

• Your browser's writing direction determines the element's direction of rotation.

• A positive angle will rotate the element clockwise in a left-to-right writing direction. But a negative angle will do a counterclockwise rotation.

• A positive angle will rotate the element counterclockwise in a right-to-left writing context. But a negative angle will do a clockwise rotation.

Examples of the CSS rotate()function

Below are some examples of how the CSS rotate()function works.

How to do a zero-degree rotation in CSS:

img {   transform: rotate(0deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotate()function to specify a zero-degree (0⁰) rotation for the image element.

How to do a 45-degree rotation in CSS:

img {   transform: rotate(45deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotate()function to specify a forty-five-degree (45⁰) rotation for the image element.

How to do a negative seventy-degree rotation in CSS:

img {   transform: rotate(-70deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotate()function to specify a negative seventy-degree (70⁰) rotation for the image element.

What is the CSS rotateX()Function?

rotateX()transforms an element by rotating it three-dimensionally around the X-axis.

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS rotateX()function

rotateX()accepts a single argument. Here is the syntax:

element {   transform: rotateX(angle);}

Note the following:

• The rotateX(angle)function is equivalent to rotate3d(1, 0, 0, angle).

• The angleargument specifies the element's angle of rotation.

• anglecan be in degree, gradian, radian, or turn.

• An angleargument consists of a number followed by the unit you wish to use—for instance, 45deg.

Examples of the CSS rotateX()function

Below are some examples of how the CSS rotateX()function works.

How to do a zero-degree rotation around the X-axis:

img {   transform: rotateX(0deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateX()function to specify a zero-degree (0⁰) rotation for the image around the X-axis.

How to do a 70-degree rotation around the X-axis:

img {   transform: rotateX(70deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateX()function to specify a seventy-degree (70⁰) rotation for the image around the X-axis.

What is the CSS rotateY()Function?

rotateY()transforms an element by rotating it three-dimensionally around the Y-axis.

Syntax of the CSS rotateY()function

rotateY()accepts a single argument. Here is the syntax:

element {   transform: rotateY(angle);}

Note the following:

• The rotateY(angle)function is equivalent to rotate3d(0, 1, 0, angle).

• The angleargument specifies the element's angle of rotation.

• anglecan be in degrees, gradians, radians, or turns.

• An angleargument consists of a number followed by the unit you wish to use—for instance, 45deg.

Examples of the CSS rotateY()function

Below are some examples of how the CSS rotateY()function works.

How to do a zero-degree rotation around the Y-axis:

img {   transform: rotateY(0deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateY()function to specify a zero-degree (0⁰) rotation for the image around the Y-axis.

How to do a 70-degree rotation around the Y-axis:

img {   transform: rotateY(70deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateY()function to specify a seventy-degree (70⁰) rotation for the image around the Y-axis.

What is the CSS rotateZ()Function?

rotateZ()transforms an element by rotating it three-dimensionally around the Z-axis.

Syntax of the CSS rotateZ()function

rotateZ()accepts a single argument. Here is the syntax:

element {   transform: rotateZ(angle);}

Note the following:

• The rotateZ(angle)function is equivalent to rotate3d(0, 0, 1, angle)or rotate(angle).

• The angleargument specifies the element's angle of rotation.

• anglecan be in degrees, gradians, radians, or turns.

• An angleargument consists of a number followed by the unit you wish to use—for instance, 45deg.

Examples of the CSS rotateZ()function

Below are some examples of how the CSS rotateZ()function works.

How to do a zero-degree rotation around the Z-axis:

img {   transform: rotateZ(0deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateZ()function to specify a zero-degree (0⁰) rotation for the image around the Z-axis.

How to do a 70-degree rotation around the Z-axis:

img {   transform: rotateZ(70deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateZ()function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

What is the CSS rotate3d()Function?

rotate3d()transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.

Syntax of the CSS rotate3d()function

rotate3d()accepts four arguments. Here is the syntax:

element {   transform: rotate3d(x, y, z, angle);}

Note the following:

• The x, y, and zarguments are numbers specifying the x-, y-, and z-coordinates.

• The coordinates are the axis around which the element will rotate.

• The angleargument specifies the element's angle of rotation.

• anglecan be in degrees, gradians, radians, or turns.

• An angleargument consists of a number followed by the unit you wish to use—for instance, 45deg.

Examples of the CSS rotate3d()function

Below are some examples of how the CSS rotate3d()function works.

How to do a 70-degree rotation around the Z-axis:

img {   transform: rotate3d(0, 0, 1, 70deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotate3d()function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

How to do a 70-degree rotation around the X-, Y-, and Z-axis:

img {   transform: rotate3d(1, 1, 1, 70deg);  width: 80%;}

Try it on StackBlitz

The snippet above used the rotate3d()function to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.

CSS Rotate Functions vs. rotateProperty: What's the Difference?

CSS rotate functions and CSS rotateproperty provides two similar ways to specify rotation transformations.

The main differences between the two rotation techniques are as follows:

• The CSS rotateproperty allows rotating an element without using the CSS transformproperty.

• The CSS rotateproperty's syntax is shorter than its function alternative.

• The CSS rotateproperty saves you from remembering the specific order to position the transform functions.

• Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transformproperty—from left to right.

• Browsers calculate the transform properties' matrix in the following transformation matrix order:

  1. translate

  2. rotate

  3. scale

Below are some examples.

How to use CSS rotateproperty vs. function to do a 45-degree rotation

img {   rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateproperty to specify a forty-five-degree (45⁰) rotation for the image element.

How to use CSS rotateproperty vs. function to do a 70-degree rotation around the X-axis

img {   rotate: x 70deg; /* Equal to a transform: rotateX(70deg) property */  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateproperty to specify a seventy-degree (70⁰) rotation for the image around the X-axis.

How to use CSS rotateproperty vs. function to do a 70-degree rotation around the Y-axis

img {   rotate: y 70deg; /* Equal to a transform: rotateY(70deg) property */  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateproperty to specify a seventy-degree (70⁰) rotation for the image around the Y-axis.

How to use CSS rotateproperty vs. function to do a 70-degree rotation around the Z-axis

img {   rotate: z 70deg; /* Equal to a transform: rotateZ(70deg) property */  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateproperty to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

How to use CSS rotateproperty vs. function to do a 70-degree rotation around the X-, Y-, and Z-axis

img {   rotate: 1 1 1 70deg; /* Equal to a transform: rotate3d(1, 1, 1, 70deg) property */  width: 80%;}

Try it on StackBlitz

The snippet above used the rotateproperty to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.

Note:A nonevalue tells browsers notto rotate the selected element.

What is the CSS scale()Function?

scale()transforms an element by resizing (scaling) it two-dimensionally from a fixed point.

Note:

• "Transform origin" is the fixed point from which the computer scales an element.

• You can define your element's fixed point using the CSS transform-originproperty. But the default is center.

Syntax of the CSS scale()function

scale()accepts two arguments. Here is the syntax:

element {   transform: scale(x, y);}

Note the following:

• The xargument can be a number or percentage. It specifies the element's scaling factor along the x-axis.

• The yargument can also be a number or percentage. It defines the element's scaling factor along the y-axis.

• Y-axis' default value is x. Therefore, if you do not provide a yargument, the browser automatically uses x's value.

• Suppose xand yare equal. In that case, browsers will scale your element uniformly and preserve its aspect ratio.

A two-dimensional Cartesian coordinate system showing the X- and Y-axis

Examples of the CSS scale()function

Below are some examples of how the CSS scale()function works.

How to scale an element uniformly along the X- and Y-axis in CSS:

img {   transform: scale(0.3);  transform-origin: left;}

Try it on StackBlitz

The snippet above used the scale()function to specify a 0.3scaling factor for the image element along the X- and Y-axis.

Note:

• scale(0.3)is equivalent to scale(0.3, 0.3).

• The percentage equivalence of scale(0.3)is scale(30%).

How to scale an element non-uniformly along the X- and Y-axis in CSS:

img {   transform: scale(0.3, 65%);  transform-origin: top left;}

Try it on StackBlitz

The snippet above used the scale()function to specify a 0.3scaling factor for the image along the X-axis and 65%along the Y-axis.

How to scale an element along only the X-axis:

img {   transform: scale(0.3, 1);  transform-origin: top left;}

Try it on StackBlitz

The snippet above used the scale()function to specify a 0.3scaling factor for the image along only the X-axis.

Note:

• A scale factor of 1or 100%tells browsers notto apply any scaling effect on the selected element.

• scale(0.3, 1)is equivalent to scaleX(0.3).

How to scale an element along only the Y-axis:

img {   transform: scale(100%, 0.2);  transform-origin: top left;}

Try it on StackBlitz

The snippet above used the scale()function to specify a 0.2scaling factor for the image along only the Y-axis.

Note:

• A 100%or 1scale factor tells browsers notto apply any scaling effect on the selected element.

• scale(100%, 0.2)is equivalent to scaleY(0.2).

CSS scale()Function vs. scaleProperty: What's the Difference?

The CSS scale()function and the CSS scaleproperty provide two similar ways to specify a scale transformation.

The main differences between the two scaling techniques are as follows:

• The CSS scaleproperty allows scaling an element without using the CSS transformproperty.

• The CSS scaleproperty's syntax is shorter than its function alternative.

• The CSS scaleproperty saves you from remembering the specific order to position the transform functions.

• Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transformproperty—from left to right.

• Browsers calculate the transform properties' matrix in the following order:

  1. translate

  2. rotate

  3. scale

Here's an example:

Use the CSS scaleproperty to scale an element nonuniformly along the X- and Y-axis.

img {   scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */  transform-origin: top left;}

Try it on StackBlitz

The snippet above used the scaleproperty to specify a 0.3scaling factor for the image along the X-axis and 65%along the Y-axis.

Note:A nonevalue tells browsers notto scale the selected element.

What is the CSS scaleZ()Function?

scaleZ()transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the z-axis.

Note:

• "Transform origin" is the fixed point from which the computer scales an element.

• You can define your element's fixed point using the CSS transform-originproperty. But the default is center.

Syntax of the CSS scaleZ()function

scaleZ()accepts a single argument. Here is the syntax:

element {   transform: scaleZ(number);}

Note:

• The scaleZ(number)function is equivalent to scale3d(1, 1, number).

• The numberargument specifies the element's scaling factor along the z-axis.

Examples of the CSS scaleZ()function

We often use scaleZ()with other CSS functions such as perspective(), translateZ(), and rotateX(). Below are some examples.

How to use scaleZ()with CSS perspective()and rotateX()functions:

img {   transform: perspective(370px) scaleZ(5) rotateX(17deg);  width: 80%;}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 370pxdistance between the user and the z=0 plane.

2. The scaleZ()function specifies a scale factor of 5for the image along the z-axis.

3. We used the rotateX()function to rotate the image seventeen-degree (17⁰) around the x-axis.

Note:

• List perspective()first whenever you chain it with other CSS transform functions. Otherwise, browsers might transform the selected element incorrectly.

• List the scaleZ()function before rotateX(). Otherwise, the browser will notscale the element.

How to use scaleZ()with CSS perspective()and translateZ()functions:

img {   width: 40%;}.second-image {   transform: perspective(370px) scaleZ(5) translateZ(30px);}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 370pxdistance between the user and the z=0 plane.

2. The scaleZ()function specifies a scale factor of 5for the image along the z-axis.

3. We used the translateZ()function to reposition the second-imagethirty pixels (30px) away from its original position along the z-axis.

What is the CSS scale3d()Function?

scale3d()transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the x-, y-, and z-axis.

Note:

• "Transform origin" is the fixed point from which the computer scales an element.

• You can define your element's fixed point using the CSS transform-originproperty. But the default is center.

Syntax of the CSS scale3d()function

scale3d()accepts three arguments. Here is the syntax:

element {   transform: scale3d(x, y, z);}

The x, y, and zarguments are numbers specifying the x-, y-, and z-coordinates. The coordinates are the axis along which browsers will scale the element.

Examples of the CSS scale3d()function

Below are some examples of how the CSS scale3d()function works.

How to use scale3d()with CSS perspective()and rotateX()functions:

img {   transform: perspective(370px) scale3d(1, 1, 5) rotateX(17deg);  width: 80%;}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 370pxdistance between the user and the z=0 plane.

2. The scale3d()function specifies a scale factor of 1, 1, and 5for the image along the x-, y-, and z-axis.

3. We used the rotateX()function to rotate the image seventeen-degrees (17⁰) around the x-axis.

Note:

• A scale factor of 1will apply noscaling effect on the element.

• List perspective()first whenever you chain it with other CSS transform functions. Otherwise, browsers might transform the selected element incorrectly.

• List the scale3d()function before rotateX(). Otherwise, the browser will notscale the element.

How to scale elements three-dimensionally:

img {   width: 40%;}.second-image {   transform: scale3d(5, 3, 0.05);  transform-origin: top left;}

Try it on StackBlitz

We used the scale3d()function to specify a scale factor of 5, 3, and 0.05for the image along the x-, y-, and z-axis.

What is the CSS skew()Function?

skew()transforms an element by slanting (skewing) it two-dimensionally around a fixed point.

Note:

• "Transform origin" is the fixed point from which the computer skews an element.

• You can define your element's fixed point using the CSS transform-originproperty. But the default is center.

Syntax of the CSS skew()function

skew()accepts two arguments. Here is the syntax:

element {   transform: skew(aX, aY);}

Note the following:

• The aXargument specifies the element's skewing angle along the x-axis.

• The aYargument specifies the element's skewing angle along the y-axis.

• aXand aYcan be in degrees, gradians, radians, or turns.

• An angleargument consists of a number followed by the unit you wish to use—for instance, 45deg.

• aYis an optional argument.

Examples of the CSS skew()function

Below are some examples of how the CSS skew()function works.

How to skew an element along only the X-axis:

img {   transform: skew(30deg);  transform-origin: top;  width: 80%;}

Try it on StackBlitz

The snippet above used the skew()function to apply a thirty-degree (30⁰) slant on the image along only the x-axis.

Note:skew(30deg)is equivalent to skewX(30deg).

How to skew an element along only the Y-axis:

img {   transform: skew(0, 40deg);  transform-origin: top left;  width: 80%;}

Try it on StackBlitz

The snippet above used the skew()function to apply a forty-degree (40⁰) slant on the image along only the y-axis.

Note:

• A zero (0) skew degree tells browsers notto apply any skewing effect on the selected element.

• skew(0, 40deg)is equivalent to skewY(40deg).

How to skew an element along the X- and Y-axis:

img {   transform: skew(30deg, 40deg);  transform-origin: top left;  width: 80%;}

Try it on StackBlitz

The snippet above used the skew()function to apply a thirty-degree (30⁰) slant on the image along the x-axis. And forty-degree (40⁰) along the y-axis.

What is the CSS translate()Function?

translate()transforms an element by repositioning (translating) it two-dimensionally.

Syntax of the CSS translate()function

translate()accepts two arguments. Here is the syntax:

element {   transform: translate(x, y);}

Note the following:

• The xargument can be a length or percentage value. It specifies the distance you wish to move the element from its original x-axis position.

• The yargument can be a length or percentage value. It defines the distance you wish to move the element from its original y-axis position.

• yis an optional argument.

Examples of the CSS translate()function

Below are some examples of how the CSS translate()function works.

How to translate an element along only the X-axis:

img {   transform: translate(150px);  width: 80%;}

Try it on StackBlitz

The snippet above used the translate()function to reposition the image 150pxaway from its original position along the x-axis.

You can also write it like this, specifying the X:

img {   transform: translateX(150px);  width: 80%

Note:translate(150px)is equivalent to translateX(150px).

How to translate an element along only the Y-axis:

img {   transform: translate(0, 55%);  width: 80%;}

Try it on StackBlitz

The snippet above used the translate()function to reposition the image 55%away from its original position along the y-axis.

Note:

• A zero (0) translate distance tells browsers notto apply any translating effect on the selected element.

• translate(0, 55%)is equivalent to translateY(55%).

How to translate an element along the X- and Y-axis:

img {   transform: translate(60%, 300px);  width: 80%;}

Try it on StackBlitz

The snippet above used the translate()function to reposition the image 60%away from its original position along the x-axis and 300pxfrom its y-axis.

What is the CSS translateZ()Function?

translateZ()transforms an element by repositioning (translating) it three-dimensionally along the z-axis.

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS translateZ()function

translateZ()accepts a single argument. Here is the syntax:

element {   transform: translateZ(length);}

The lengthargument specifies the distance you wish to move the element from its original z-axis position.

A three-dimensional Cartesian coordinate system with a red arrow defining the green plane's translateZ length

Examples of the CSS translateZ()function

We often use translateZ()with the perspective()function. Below are some examples.

How to use translateZ()with the CSS perspective()function:

img {   width: 40%;}.second-image {   transform: perspective(33px) translateZ(10px);}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 33pxdistance between the user and the z=0 plane.

2. We used the translateZ()function to reposition the second-imageten pixels (10px) away from its original position along the z-axis.

Note:

• Suppose the second-image's z-axis position is larger than or equal to the perspective()function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element (or when the element is behind the user).

• The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.

How to use translateZ()with a 70pxperspective:

img {   width: 40%;}.second-image {   transform: perspective(70px) translateZ(10px);}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 70pxdistance between the user and the z=0 plane.

2. We used the translateZ()function to reposition the second-imageten pixels (10px) away from its original position along the z-axis.

What is the CSS translate3d()Function?

translate3d()transforms an element by repositioning (translating) it three-dimensionally along the x-, y-, and z-axis.

Syntax of the CSS translate3d()function

translate3d()accepts three arguments. Here is the syntax:

element {   transform: translate3d(x, y, z);}

Note the following:

• The xargument can be a length or percentage value. It specifies the distance you wish to move the element from its original x-axis position.

• The yargument can be a length or percentage value. It defines the distance you wish to move the element from its original y-axis position.

• zcan only be a length—not a percentage. It defines the distance you wish to move the element from its original z-axis position.

Examples of the CSS translate3d()function

Below are some examples of how the CSS translate3d()function works.

How to translate an element along only the X-axis

img {   transform: translate3d(150px, 0, 0);  width: 80%;}

Try it on StackBlitz

The snippet above used the translate3d()function to reposition the image 150pxaway from its original position along the x-axis.

Note:translate3d(150px, 0, 0)is equivalent to translateX(150px).

How to translate elements three-dimensionally:

img {   width: 40%;}.second-image {   transform: perspective(300px) translate3d(15%, 45%, 200px);}

Try it on StackBlitz

The snippet above used the translate3d()function to reposition the image 15%away from its original position along the x-axis, 45%from its y-axis, and 200pxfrom its z-axis.

CSS Translate Functions vs. translateProperty: What's the Difference?

The CSS translate functions and the CSS translateproperty provide two similar ways to specify a translation transformation.

The main differences between the two translation techniques are as follows:

• The CSS translateproperty allows translating an element without using the CSS transformproperty.

• The CSS translateproperty's syntax is shorter than its function alternative.

• The CSS translateproperty saves you from remembering the specific order to position the transform functions.

• Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transformproperty—from left to right.

• Browsers calculate the transform properties' matrix in the following order:

  1. translate

  2. rotate

  3. scale

Below are some examples.

How to use CSS translateproperty vs. function to translate an element along the X- and Y-axis

img {   translate: 60% 300px; /* Equal to a transform: translate(60%, 300px) property */  width: 80%;}

Try it on StackBlitz

The snippet above used the translateproperty to reposition the image 60%away from its original position along the x-axis. And 300pxfrom its y-axis.

Note:Suppose you wish to translate an element along the z-axis. In that case, set a perspectiveproperty on the "parent element" of the element you want to translate. Otherwise, the element will not move along its z-axis.

How to use CSS translateproperty vs. function to translate an element along the Z-axis

img {   width: 40%;}div {   perspective: 35px;}.second-image {   translate: 0px 0px 17px; /* Equal to a transform: translateZ(17px) property */}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspectiveproperty to define a 35pxdistance between the user and the z=0 plane.

2. We used the translateproperty to reposition the second-imageseventeen pixels (17px) away from its original position along the z-axis.

How to use CSS translateproperty vs. function to translate an element three-dimensionally

img {   width: 40%;}div {   perspective: 300px;}.second-image {   translate: 50% 25% 200px; /* Equal to a transform: translate3d(50%, 25%, 200px) property */}

Try it on StackBlitz

The snippet above used the translateproperty to reposition the image 50%away from its original position along the x-axis, 25%from its y-axis, and 200pxfrom its z-axis.

Note:A nonevalue tells browsers notto translate the selected element.

What is the CSS perspective()Function?

perspective()transforms an element by adding some perspective effects to it.

Syntax of the CSS perspective()function

perspective()accepts only one argument. Here is the syntax:

element {   transform: perspective(length);}

The lengthargument specifies the user's distance to the z=0 plane.

A three dimensional Cartesian coordinate system with a red arrow defining the distance between the user and the z=0 plane

Examples of the CSS perspective()function

We often use perspective()with other CSS functions such as translateZ(), rotateX(), and rotateY(). Below are some examples.

How to use perspective()with the CSS translateZ()function:

img {   width: 40%;}.second-image {   transform: perspective(33px) translateZ(10px);}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 33pxdistance between the user and the z=0 plane.

2. We used the translateZ()function to reposition the second-imageten pixels (10px) away from its original position along the z-axis.

Note the following:

• Suppose the second-image's z-axis position is larger than or equal to the perspective()function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element (or when the element is behind the user).

• The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.

How to use perspective()with the CSS rotateY()function:

img {   width: 40%;}.second-image {   transform: perspective(33px) rotateY(-10deg);}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 33pxdistance between the user and the z=0 plane.

2. We used the rotateY()function to rotate the second-imagenegative ten-degree (-10⁰) around the y-axis.

How to use perspective()with the CSS rotateX()function:

img {   width: 40%;}.second-image {   transform: perspective(33px) rotateX(17deg);}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspective()function to define a 33pxdistance between the user and the z=0 plane.

2. We used the rotateX()function to rotate the second-imageseventeen-degree (17⁰) around the x-axis.

CSS perspective()Function vs. perspectiveProperty: What's the Difference?

The CSS perspective()function and the perspectiveproperty provide two similar ways to add perspective effects to HTML elements.

The main differences between the two perspective techniques are as follows:

• We apply the perspective()function "directly on the element" we want to add some perspective effects to.

• We apply the perspectiveproperty "on the parent element" of the element we want to add some perspective effects to.

• The perspective()function works as a transformproperty's value.

• The CSS perspectiveproperty allows you to create perspective effects without using the CSS transformproperty.

Here's an example:

Use CSS perspectiveproperty to add perspective effect to a child element:

img {   width: 40%;}div {   perspective: 33px;}.second-image {   rotate: x 17deg;}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used the perspectiveproperty to define a 33pxdistance between the user and the z=0 plane.

2. We used the rotateproperty to rotate the second-imageseventeen-degree (17⁰) around the x-axis.

Note:

• The CSS perspectiveproperty saves you from remembering the specific order to position the transform functions.

• A nonevalue tells browsers notto add any perspective effect to the selected element's children.

What is the CSS matrix()Function?

The CSS matrix()function is a shorthand for the following 2D transform functions:

• scaleX()

• skewY()

• skewX()

• scaleY()

• translateX()

• translateY()

In other words, instead of writing:

img {   transform-origin: 0 0;  transform: translateX(100px) translateY(250px) scaleX(2) scaleY(0.9)    skewX(10deg) skewY(35deg);  width: 80%;}

Try it on StackBlitz

You can alternatively use the matrix()function to shorten your code like so:

img {   transform-origin: 0 0;  transform: matrix(2.24693, 0.630187, 0.352654, 0.9, 100, 250);  width: 80%;}

Try it on StackBlitz

The CSS matrix()function's syntax

The matrix()function accepts six values. Here's the syntax:

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

You can represent the CSS matrix's values as homogeneous coordinates on ℝℙ²like so:

| scX skX tX | ← x-axis| skY scY tY | ← y-axis|  0   0   1 | ← constants

Note the following:

• scXand skXare numbers describing an element's scale and skew linear transformation on the x-axis.

• tXis a number representing an element's translation on the x-axis.

• skYand scYare numbers describing an element's skew and scale linear transformation on the y-axis.

• tYis a number representing an element's translation on the y-axis.

• 0, 0, 1are constants.

• We do not pass the constants as arguments to the matrix()function because the computer implies them automatically.

Examples of the CSS matrix()function

Below are some examples of the CSS matrix()function.

How to convert scaleX()to matrix()function:

Consider the following transformproperty:

img {   transform-origin: 0 0;  transform: scaleX(2);  width: 80%;}

Try it on StackBlitz

Here is the matrix()equivalent of the above scaleX()function:

img {   transform-origin: 0 0;  transform: matrix(2, 0, 0, 1, 0, 0); /* scX, skY, skX, scY, tX, tY */  width: 80%;}

Try it on StackBlitz

Let's also represent the matrix's values as homogeneous coordinates on ℝℙ²:

| 2 0 0 | ← x-axis| 0 1 0 | ← y-axis| 0 0 1 | ← constants

Below is another example.

How to convert translateY()to matrix()function:

img {   transform-origin: 0 0;  transform: translateY(250px);  width: 80%;}

Try it on StackBlitz

Here is the matrix()equivalent of the above translateY()function:

img {   transform-origin: 0 0;  transform: matrix(1, 0, 0, 1, 0, 250); /* scX, skY, skX, scY, tX, tY */  width: 80%;}

Try it on StackBlitz

Let's also represent the matrix's values as homogeneous coordinates on ℝℙ²:

| 1 0 0   | ← x-axis| 0 1 250 | ← y-axis| 0 0 1   | ← constants

Below is a third example.

How to convert translateX()and scale()to matrix()function:

img {   transform-origin: 0 0;  transform: translateX(100px) scale(2);  width: 80%;}

Try it on StackBlitz

Here is the syntax for converting the above transformproperty's value to matrix():

matrix = (translateX's homogeneous coordinates) x (scale's homogeneous coordinates)

Let's begin the conversion by defining translateX(100px)'s homogeneous coordinates:

| 1 0 100 | ← x-axis| 0 1 0   | ← y-axis| 0 0 1   | ← constants

Let's also define scale(2)'s homogeneous coordinates:

| 2 0 0 | ← x-axis| 0 2 0 | ← y-axis| 0 0 1 | ← constants

It's now time to multiply the two homogeneous coordinates by using the following syntax:

| a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr || b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr || c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

Let's implement the above syntax like so:

| 1 0 100 |   | 2 0 0 |   | 2 + 0 + 0   0 + 0 + 0   0 + 0 + 100 || 0 1  0  | x | 0 2 0 | = | 0 + 0 + 0   0 + 2 + 0   0 + 0 +  0  || 0 0  1  |   | 0 0 1 |   | 0 + 0 + 0   0 + 0 + 0   0 + 0 +  1  |

The next step is to resolve the addition. So, let's do that now.

| 1 0 100 |   | 2 0 0 |   | 2 0 100 || 0 1  0  | x | 0 2 0 | = | 0 2  0  || 0 0  1  |   | 0 0 1 |   | 0 0  1  |

The addition's result above gives us the homogeneous coordinates of the transform: translateX(100px) scale(2)property.

In other words, the product of (translateX's homogeneous coordinates)and (scale's homogeneous coordinates)equal:

| 2 0 100 | ← x-axis| 0 2  0  | ← y-axis| 0 0  1  | ← constants

Therefore, the matrix equivalence of transform: translateX(100px) scale(2)is transform: matrix(2, 0, 0, 2, 100, 0).

img {   transform-origin: 0 0;  transform: matrix(2, 0, 0, 2, 100, 0);  width: 80%;}

Try it on StackBlitz

Please note that transform: translateX(100px) scale(2)and transform: scale(2) translateX(100px)return different matrixes. Let's see an example of the second arrangement below.

How to convert scale()and translateX()to matrix()function:

Consider the following transformproperty:

img {   transform-origin: 0 0;  transform: scale(2) translateX(100px);  width: 80%;}

Try it on StackBlitz

Here is the syntax for converting the above transformproperty's value to matrix():

matrix = (scale's homogeneous coordinates) x (translateX's homogeneous coordinates)

Let's begin the conversion by defining scale(2)'s homogeneous coordinates:

| 2 0 0 | ← x-axis| 0 2 0 | ← y-axis| 0 0 1 | ← constants

Let's also define translateX(100px)'s homogeneous coordinates:

| 1 0 100 | ← x-axis| 0 1  0  | ← y-axis| 0 0  1  | ← constants

It's now time to multiply the two homogeneous coordinates by using the following syntax:

| a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr || b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr || c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

Let's implement the above syntax like so:

| 2 0 0 |   | 1 0 100 |   | 2 + 0 + 0   0 + 0 + 0   200 + 0 + 0 || 0 2 0 | x | 0 1  0  | = | 0 + 0 + 0   0 + 2 + 0    0 + 0 + 0  || 0 0 1 |   | 0 0  1  |   | 0 + 0 + 0   0 + 0 + 0    0 + 0 + 1  |

The next step is to resolve the addition. So, let's do that now.

| 2 0 0 |   | 1 0 100 |   | 2 0 200 || 0 2 0 | x | 0 1  0  | = | 0 2  0  || 0 0 1 |   | 0 0  1  |   | 0 0  1  |

The addition's result above gives us the homogeneous coordinates of the transform: scale(2) translateX(100px)property.

In other words, the product of (scale's homogeneous coordinates)and (translateX's homogeneous coordinates)equal:

| 2 0 200 | ← x-axis| 0 2  0  | ← y-axis| 0 0  1  | ← constants

Therefore, the matrix equivalence of transform: scale(2) translateX(100px)is transform: matrix(2, 0, 0, 2, 200, 0).

img {   transform-origin: 0 0;  transform: matrix(2, 0, 0, 2, 200, 0);  width: 80%;}

Try it on StackBlitz

Notice that transform: scale(2) translateX(100px)equals transform: matrix(2, 0, 0, 2, 200, 0). And transform: translateX(100px) scale(2)is equivalent to transform: matrix(2, 0, 0, 2, 100, 0).

In other words, the order in which you write the transform functions matters. Let's discuss more on this below.

Why Does the CSS Transform Functions' Order Matter?

The order in which you write CSS transform functions matters because of the way browsers calculate the matrix's values.

For instance, consider the following snippet:

div {   position: absolute;  width: 100px;  height: 100px;  transform-origin: 0 0;}.red {   border: 3px solid red;  background-color: rgba(255, 0, 0, 0.5);}.green {   border: 3px solid green;  background-color: rgba(0, 128, 0, 0.5);  transform: translateX(100px) scale(2);}.blue {   border: 3px solid blue;  background-color: rgba(0, 0, 255, 0.5);  transform: scale(2) translateX(100px);}

Try it on StackBlitz

The only difference between the green and the blue divs is the order in which we wrote their transform functions.

However, the computer translated the two containers using different values (100pxfor the green divand 200pxfor the blue one).

So, why did the transform functions' order affect the divs' translation values? Here's the reason:

• Browsers multiply each transform function's homogeneous coordinates in order—from left to right.

In other words, the computer used the following syntax to compute the green div's matrix:

• Green div's matrix = (translateX's homogeneous coordinates) x (scale's homogeneous coordinates)

And it used the following syntax to calculate the blue div's matrix:

• Blue div's matrix = (scale's homogeneous coordinates) x (translateX's homogeneous coordinates)

Therefore, the position of the transform functions determined the matrix's arguments because browsers began the calculation in order from the leftmost function to the right.

Knowing how to convert transform functions to matrix()is beneficial. And having some conversion tools can come in handy. So, let's discuss some helpful tools you can use.

Tools for Converting Transform Functions to matrix()

The two tools you can use to do a quick conversion of transform functions to matrix()are:

• JavaScript's window.getComputedStyle()method

• Eric Meyer and Aaron Gustafson's matrix resolution tool

How to use window.getComputedStyle()to convert transform functions to matrix()

Suppose you want to convert the following transform functions to matrix:

img {   transform-origin: 0 0;  transform: scale(2) translateX(100px);  width: 80%;}

You will add an idattribute to the image element:

<img  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"  alt=""  id="image"/>

Then, in JavaScript, you will:

1. Use the idattribute to get the image element.

2. Use the window.getComputedStyle()method to get the image's transformproperty's value.

Here's the code:

// Get the image element by its id name:const image = document.getElementById("image");// Get the image element's transform property's value:const matrix = window.getComputedStyle(image).getPropertyValue("transform");// Log the matrix variable's value to the console:console.log(matrix);

Try it on StackBlitz

Browsers, by default, convert a CSS transformproperty's value to its matrix equivalent. So, the snippet above returned the image's computed value.

Let's now discuss the second conversion tool.

How to use the matrix resolutions tool to convert transform functions to matrix()

Suppose you want to convert the following transform functions to a matrix():

img {   transform-origin: 0 0;  transform: scale(2) translateX(100px);  width: 80%;}

You will do the following:

1. Go to The Matrix Resolutions website: https://meyerweb.com/eric/tools/matrix/.

2. Paste your transform functions (scale(2) translateX(100px)) into the first text field.

3. Click "The Red Pill" button to generate the transform functions' matrix equivalence.

Click the red pill button to convert CSS transform functions to a matrix() function

Tip:Use matrix3d() to create a 3D transformation matrix.

Important Stuff to Know about Transforming Elements in CSS

Here are three essential facts to remember when you transform elements in CSS.

1. Transform creates a stacking context

Suppose you set the transformproperty to any value other than none. In that case, the browser will create a stacking context. And the transformed element will serve as a containing block to any absolute or fixed positioned elements it contains.

2. Scaling and zooming animations cause accessibility issues

Whenever you include scaling or zooming animations in your app, provide users an option to turn off animations. This option is necessary because scaling and zooming animations cause accessibility issues.

3. Not all elements are transformable

You cannot transform the following box models:

• Non-replaced inline elements

• table-column boxes

• table-column-group

Wrapping Up

In this article, we discussed all the CSS transform tools you need to translate, rotate, skew, scale, or add perspective effects to HTML elements.

I hope you've found this article helpful.

Thanks for reading!

If you like this tutorial, you will enjoy my CSS Flexbox book. It is a handy quick reference guide that uses images and live examples to explain Flexbox.